<template>
  <div>
    <el-form
      ref="formItem"
      :model="formItem"
      :rules="rules"
      label-width="100px"
      @submit.native.prevent
      v-load="loading"
    >
      <el-form-item label="代理id：" v-if="formItem.id">
        <el-input class="form-sty" disabled v-model="formItem.id" placeholder style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="代理名称：" prop="title">
        <el-input
          class="form-sty"
          v-model="formItem.title"
          placeholder="请输入代理名称"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="代理账号：" prop="loginName">
        <el-input
          class="form-sty"
          v-model="formItem.loginName"
          placeholder="请输入代理账号"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input
          class="form-sty"
          type="password"
          v-model="formItem.pwd"
          placeholder="请输入密码"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人：" prop="linkName">
        <el-input
          class="form-sty"
          v-model="formItem.linkName"
          placeholder="请输入联系人"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人手机：" prop="linkMobile">
        <el-input
          class="form-sty"
          v-model="formItem.linkMobile"
          placeholder="请输入联系人手机"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属城市：" prop="cityId">
        <el-select v-model="formItem.cityId" class="form-sty">
          <el-option
            v-for="(item, index) in cityList"
            :key="index"
            :value="item.id"
            :label="item.cityName"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="酬劳比例(%)：">
        <el-input-number
          :max="100"
          :min="0"
          :step="1"
          v-model="formItem.agentRate"
          class="form-sty"
          style="width: 80%"
        />
        <div style="color :gray">100为全额</div>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input-number
          placeholder="请输入排序"
          :precision="0"
          v-model="formItem.sort"
          class="form-sty"
          style="width: 80%"
        />
      </el-form-item>
      <el-form-item label="显示/隐藏：">
        <el-radio-group v-model="formItem.status">
          <el-radio :label="1">
            <span>显示</span>
          </el-radio>
          <el-radio :label="0">
            <span>隐藏</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAgentFromDataApi, cityList, saveAgentApi } from '@/api/base';
export default {
  props: {
    agentId: 0,
  },
  data() {
    var checkCityId = (rule , val ,callback ) => {
      if(!val){
        return callback(new Error('请选择代理城市'))
      }
      callback();
    }
    return {
      loading: false,
      formItem: {
        id: 0,
        cityId: '',
        title: '',
        linkName: '',
        linkMobile: '',
        loginName: '',
        pwd: '',
        status: 0,
        sort: 0,
        cityName: '',
        agentRate: 0,
      },
      cityList: [],
      rules: {
        linkName: [{ required: true, message: '请输入联系人', trigger: 'change' }],
        linkMobile: [{ required: true, message: '请输入联系人手机', trigger: 'change' }],
        loginName: [{ required: true, message: '请输入登录名', trigger: 'change' }],
        title: [{ required: true, message: '请输入代理名称', trigger: 'change' }],
        cityId: [{ required: true, validator: checkCityId, trigger: 'change' }],
      },
    };
  },
  created() {
    this.getCitys();
  },
  mounted() {
    if (this.agentId) {
      this.getInfo();
    }
  },
  methods: {
    getInfo() {
      this.loading = true;
      getAgentFromDataApi(this.agentId).then(async (res) => {
        Object.entries(this.formItem).forEach(([index, item]) => {
          this.formItem[index] = res[index];
        });
        this.formItem.pwd = '';
        this.loading = false;
      });
    },
    getCitys() {
      cityList({ page: 1, limit: 999 }).then((res) => {
        this.cityList = res.list;
      });
    },
    setAgent() {
      this.$refs.formItem.validate((valid) => {
        if (valid) {
          saveAgentApi(this.formItem).then((res) => {
            this.$message.success('操作成功');
            this.$emit('submitSuccess');
          });
        }
      });
    },
  },
};
</script>

<style scoped>
</style>